﻿<template id="@(ViewBag.GetCompTemplate("form"))">
    <el-dialog v-model="visible" :width="500" :title="title" :destroy-on-close="true" :close-on-click-modal="false" :close-on-press-escape="false" draggable v-on:close="closed">
        <el-divider class="layout-page-form-top-border"></el-divider>
        <el-form ref="formRef" :rules="rules" :disabled="disabled" :model="record" :hide-required-asterisk="disabled" label-width="auto" label-suffix=" :">
            <el-form-item label="用户名" prop="Username">
                <el-input :disabled="record.Id>0" v-model="record.Username"></el-input>
            </el-form-item>
            <el-form-item v-if="!record.Id" label="密码" prop="Password">
                <el-input v-model="record.Password"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="Name">
                <el-input v-model="record.Name"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="Status">
                <el-radio-group v-model="record.Status">
                    <el-radio-button value="ok" label="启用"></el-radio-button>
                    <el-radio-button value="no" label="停用"></el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="头像">
                <el-upload action="/other/upload/cut"
                           accept="image/png,image/jpeg"
                           :data="{dir:'sys/user',width:200,height:200}"
                           :show-file-list="false"
                           :on-success="handleAvatarSuccess"
                           :before-upload="beforeAvatarUpload">
                    <el-avatar :size="60" :src="record.Avatar?`/userfiles/sys/user/${record.Avatar}`:null">
                        <el-icon :size="24"><picture-filled></picture-filled></el-icon>
                    </el-avatar>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button v-on:click="close">取消</el-button>
            <el-button type="primary" v-on:click="submit">确定</el-button>
        </template>
    </el-dialog>
</template>
<script type="text/javascript">
    var @(ViewBag.GetCompName("form")) = {
        template: "#@(ViewBag.GetCompTemplate("form"))", data() {
            return {
                path: "@(ViewBag.PagePath)",
                visible: false,
                title: null,
                rules: {
                    Username: [{ required: true, message: "请填写用户名" }],
                    Password: [{ required: true, message: "请填写密码" }],
                    Name: [{ required: true, message: "请填写姓名" }]
                },
                record: {},
                disabled: false
            }
        },
        methods: {
            reset(){
                this.record.IsSuper = false;
                this.record.Status = "ok";
            },
            open(text, record){
                var that = this;
                that.title = text;
                if (record && record.Id) {
                    app.func.getEntity(`${that.path}/get`, record.Id, result => {
                        that.record = result.data;
                    });
                }
                else { that.reset(); }
                that.visible = true;
            },
            close(){
                this.visible = false;
            },
            closed(){
                this.title = null;
                this.record = {};
            },
            submit(){
                var that = this;
                that.$refs.formRef.validate(valid => {
                    if (valid) {
                        app.func.submit(`${that.path}/save`, that.record, result => {
                            that.close(); that.$emit("refresh");
                        });
                    }
                });
            },
            handleAvatarSuccess(result, file){
                var that = this;
                if (result.success) {
                    that.record.Avatar = result.data.file;
                }
                else { app.func.warning(result.message); }
            },
            beforeAvatarUpload(file){
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    app.func.warning("上传头像图片大小不能超过 2MB!");
                }
                return isLt2M;
            }
        },
        mounted() { }
    };
</script>